1
|
|
|
var kirkiDependencies = { |
|
|
|
|
2
|
|
|
|
3
|
|
|
listenTo: {}, |
4
|
|
|
|
5
|
|
|
init: function() { |
6
|
|
|
var self = this; |
|
|
|
|
7
|
|
|
|
8
|
|
|
wp.customize.control.each( function( control ) { |
9
|
|
|
self.showKirkiControl( control ); |
10
|
|
|
} ); |
11
|
|
|
|
12
|
|
|
_.each( self.listenTo, function( slaves, master ) { |
13
|
|
|
_.each( slaves, function( slave ) { |
14
|
|
|
wp.customize( master, function( setting ) { |
15
|
|
|
var setupControl = function( control ) { |
|
|
|
|
16
|
|
|
var setActiveState, |
|
|
|
|
17
|
|
|
isDisplayed; |
18
|
|
|
|
19
|
|
|
isDisplayed = function() { |
20
|
|
|
return self.showKirkiControl( wp.customize.control( slave ) ); |
21
|
|
|
}; |
22
|
|
|
setActiveState = function() { |
23
|
|
|
control.active.set( isDisplayed() ); |
24
|
|
|
}; |
25
|
|
|
|
26
|
|
|
setActiveState(); |
27
|
|
|
setting.bind( setActiveState ); |
28
|
|
|
control.active.validate = isDisplayed; |
29
|
|
|
}; |
30
|
|
|
wp.customize.control( slave, setupControl ); |
31
|
|
|
} ); |
32
|
|
|
}); |
33
|
|
|
}); |
34
|
|
|
}, |
35
|
|
|
|
36
|
|
|
/** |
37
|
|
|
* Should we show the control? |
38
|
|
|
* |
39
|
|
|
* @since 3.0.17 |
40
|
|
|
* @param {string|object} control - The control-id or the control object. |
41
|
|
|
* @returns {bool} |
42
|
|
|
*/ |
43
|
|
|
showKirkiControl: function( control ) { |
44
|
|
|
var self = this, |
|
|
|
|
45
|
|
|
show = true; |
46
|
|
|
|
47
|
|
|
if ( _.isString( control ) ) { |
48
|
|
|
control = wp.customize.control( control ); |
|
|
|
|
49
|
|
|
} |
50
|
|
|
|
51
|
|
|
// Exit early if control not found or if "required" argument is not defined. |
52
|
|
|
if ( 'undefined' === typeof control || ( control.params && _.isEmpty( control.params.required ) ) ) { |
53
|
|
|
return true; |
54
|
|
|
} |
55
|
|
|
|
56
|
|
|
// Loop control requirements. |
57
|
|
|
_.each( control.params.required, function( requirement ) { |
58
|
|
|
if ( 'undefined' === typeof wp.customize.control( requirement.setting ) ) { |
59
|
|
|
show = true; |
60
|
|
|
return; |
61
|
|
|
} |
62
|
|
|
var requirementShow = self.evaluate( requirement.value, wp.customize.control( requirement.setting ).setting._value, requirement.operator ); |
|
|
|
|
63
|
|
|
|
64
|
|
|
self.listenTo[ requirement.setting ] = self.listenTo[ requirement.setting ] || []; |
65
|
|
|
if ( -1 === self.listenTo[ requirement.setting ].indexOf( control.id ) ) { |
66
|
|
|
self.listenTo[ requirement.setting ].push( control.id ); |
67
|
|
|
} |
68
|
|
|
|
69
|
|
|
if ( ! requirementShow ) { |
70
|
|
|
show = false; |
71
|
|
|
} |
72
|
|
|
} ); |
73
|
|
|
return show; |
74
|
|
|
}, |
75
|
|
|
|
76
|
|
|
/** |
77
|
|
|
* Figure out if the 2 values have the relation we want. |
78
|
|
|
* |
79
|
|
|
* @since 3.0.17 |
80
|
|
|
* @param {mixed} value1 - The 1st value. |
81
|
|
|
* @param {mixed} value2 - The 2nd value. |
82
|
|
|
* @param {string} operator - The comparison to use. |
83
|
|
|
* @returns {bool} |
84
|
|
|
*/ |
85
|
|
|
evaluate: function( value1, value2, operator ) { |
86
|
|
|
var found = false, |
|
|
|
|
87
|
|
|
result = null; |
88
|
|
|
|
89
|
|
|
if ( '===' === operator ) { |
90
|
|
|
result = value1 === value2; |
91
|
|
|
} else if ( '==' === operator || '=' === operator || 'equals' === operator || 'equal' === operator ) { |
92
|
|
|
result = value1 == value2; // jshint ignore:line |
93
|
|
|
} else if ( '!==' === operator ) { |
94
|
|
|
result = value1 !== value2; |
95
|
|
|
} else if ( '!=' === operator || 'not equal' === operator ) { |
96
|
|
|
result = value1 != value2; // jshint ignore:line |
97
|
|
|
} else if ( '>=' === operator || 'greater or equal' === operator || 'equal or greater' === operator ) { |
98
|
|
|
result = value2 >= value1; |
99
|
|
|
} else if ( '<=' === operator || 'smaller or equal' === operator || 'equal or smaller' === operator ) { |
100
|
|
|
result = value2 <= value1; |
101
|
|
|
} else if ( '>' === operator || 'greater' === operator ) { |
102
|
|
|
result = value2 > value1; |
103
|
|
|
} else if ( '<' === operator || 'smaller' === operator ) { |
104
|
|
|
result = value2 < value1; |
105
|
|
|
} else if ( 'contains' === operator || 'in' === operator ) { |
106
|
|
|
if ( _.isArray( value2 ) ) { |
107
|
|
|
found = false; |
108
|
|
|
_.each( value2, function( value ) { |
109
|
|
|
if ( value == value1 ) { // jshint ignore:line |
110
|
|
|
found = true; |
111
|
|
|
} |
112
|
|
|
} ); |
113
|
|
|
return found; |
114
|
|
|
} else if ( _.isObject( value2 ) ) { |
115
|
|
|
found = false; |
116
|
|
|
if ( ! _.isUndefined( value2[ value1 ] ) ) { |
117
|
|
|
found = true; |
118
|
|
|
} |
119
|
|
|
|
120
|
|
|
_.each( value2, function( subValue ) { |
121
|
|
|
if ( value1 === subValue ) { |
122
|
|
|
found = true; |
123
|
|
|
} |
124
|
|
|
} ); |
125
|
|
|
return found; |
126
|
|
|
} else if ( _.isString( value2 ) ) { |
127
|
|
|
return value1.indexOf( value2 ) > -1; |
128
|
|
|
} |
129
|
|
|
} |
130
|
|
|
if ( null === result ) { |
131
|
|
|
return true; |
132
|
|
|
} |
133
|
|
|
return result; |
134
|
|
|
} |
135
|
|
|
}; |
136
|
|
|
|
137
|
|
|
jQuery( document ).ready( function() { |
138
|
|
|
kirkiDependencies.init(); |
139
|
|
|
} ); |
140
|
|
|
|
Since ECMAScript 6, you can create block-scoped vars or constants with the keywords
let
orconst
. These variables/constants are only valid in the code block where they have been declared.Consider the following two pieces of code:
and
The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.
To know more about this ECMA6 feature, look at the MDN pages on let and const.